<script setup lang='ts'>
import { ref, nextTick, watch, computed } from 'vue'
import Circle from './components/circle.vue'
import Lyric from './components/Lyric.vue'
import { playerMusicApi, playerLyricApi, MusicCommentApi } from '@/services/index'
import type { Music, CommentResponse, CommentItem } from '@/services/type'
import { useMusicStore } from '@/store/listMusic'
import songplay from '../components/songplay.vue'
import commentSection from '@/pages/components/commentSection.vue'


// 组件 dom元素
const songp = ref() 

// 组件事件
const songList = () => {
  if(songp.value) {
    songp.value.open()
  }
}

const useStore = useMusicStore()
const songMusic = ref<Music>()
const lyricMusic = ref('')
const mask = ref(true)
const m = ref('0')
const s = ref('0')
const curM = ref('00')
const curS = ref('00')
const curValue = ref(0)
const type = ref(0)
const list = ref<CommentResponse>()
  const commentBtn = ref()
  const isListening = ref(true)
// 歌曲
const song = async (id :number) => {
  try{
    const res = await playerMusicApi(id)
    // console.log(res.data[0])
    songMusic.value = res.data[0]
    m.value = zero(Math.floor(songMusic.value?.time/1000/60%60))
    s.value = zero(Math.floor(songMusic.value?.time/1000%60))
  }catch(e){
    console.log(e)
  }
}


// 歌词
const words = async (id :number) => {
  try{
    const res = await playerLyricApi(id)
    // console.log(res.lrc.lyric)
    lyricMusic.value = res.lrc.lyric
  }catch(e){
  console.log(e)
  }
}
// 聊天
const comments = async (id :number) => {
  try{
    const res = await MusicCommentApi(id)
    list.value = res
  }catch(e){
  console.log(e)
  }
}

const onComment = () => {
  comments(useStore.song?.id as number)
  if(commentBtn.value){
    commentBtn.value.open()
  }
}

lyricMusic.value.split('br')


const curSong = computed(() => useStore.song)



// 监听歌曲链接
watch(
  () => curSong.value?.id,
  (newVal,oldVal) => {
      if (!curSong.value) return
      song(curSong.value.id)
      words(curSong.value.id)
      uni.setNavigationBarTitle({
        title: curSong.value.name + '-' + curSong.value.ar?.map((v) => v.name).join("/")
      });
      console.log(newVal,useStore.old?.id)
      if(newVal === useStore.old?.id) return
      useStore.old = curSong.value
      useStore.audioContext.pause()
      setTimeout(() => {
      if (songMusic.value?.url) {
        useStore.audioContext.src = songMusic.value.url as string;
        useStore.audioContext.play();
        useStore.isSong = true
      }
    },1500)
    
  },
  {
    deep: true,
    immediate: true
  }
)

useStore.audioContext.onPlay(() => {
  console.log('音频开始播放');
});
useStore.audioContext.onError((err) => {
  console.error('音频播放出错', err);
});
useStore.audioContext.onEnded(() => {
  if(type.value === 0 ){
    useStore.index++
    useStore.audioContext.loop = false
  }else if (type.value === 1) {
    useStore.index = Math.floor(Math.random()*(useStore.songs.length-1))
    useStore.audioContext.loop = false
  }
});

const drag = (event: any) => {
  // console.log(event.detail.value)
  // useStore.audioContext.duration * event.detail.value/100
  useStore.audioContext.seek(useStore.audioContext.duration * event.detail.value/100)
}

watch(type,
  () => {
    if( type.value===2 ) {
    useStore.audioContext.loop = true
    } else {
      useStore.audioContext.loop = false
    }
  }
)



// 音乐播放事件
useStore.audioContext.onTimeUpdate(() => {
  curValue.value = useStore.audioContext.currentTime /useStore.audioContext.duration * 100
  curM.value = zero(Math.floor(useStore.audioContext.currentTime/60%60))
  curS.value = zero(Math.floor(useStore.audioContext.currentTime%60))
})

// 播放
const changeSong = () => {
  useStore.isSong=true
  useStore.audioContext.play()
}
// 暂停
const stopSong = () => {
  useStore.isSong=false
  useStore.audioContext.pause()
}
const changeIndex = (n :number) => {
  if(type.value === 1) {
    useStore.index = Math.floor(Math.random()*(useStore.songs.length-1))
  } else if(type.value === 0 || type.value === 2) {
    useStore.index += n
  }
}
const zero = (n :number) => n < 10? '0' + n : String(n)

// console.log(useStore.song)
</script>

<template>
<commentSection :hot-list="list?.hotComments as CommentItem[]" :new-list="list?.comments as CommentItem[]" ref="commentBtn"/>
<songplay ref="songp"/>
<view class="player" :style="{backgroundImage: `url(${useStore.song?.al?.picUrl})`}">
  <view class="back">
    <view class="center" @click="mask=!mask">
      <Circle v-if="mask"></Circle>
      <Lyric v-else :lyricMusic="lyricMusic" :audioContext="useStore.audioContext"></Lyric>
    </view>
    <view class="footer">
      <view class="mess">
        <uni-icons type="heart" size="30" color="#fff"></uni-icons>
        <uni-icons type="chat" size="30" color="#fff" @click="onComment"></uni-icons>
      </view>
      <view class="plan">
        <text>{{ curM }}:{{ curS }}</text>
        <slider v-model="curValue" activeColor="#10aeff" block-size="20" @change="drag" :min="0" :max="100" />
        <text>{{ m }}:{{ s }}</text>
      </view>
      <view class="play">
        <svg t="1742302124229" v-if="type === 0" class="icon" @click="type++" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9048" id="mx_n_1742302124230" width="30" height="30"><path d="M941 414.6H83c-11 0-20-9-20-20s9-20 20-20h858c11 0 20 9 20 20s-8.9 20-20 20z" p-id="9049" fill="#ffffff"></path><path d="M937.2 405.4c-5.1 0-10.2-2-14.1-5.9L780.7 257.1c-7.8-7.8-7.8-20.5 0-28.3 7.8-7.8 20.5-7.8 28.3 0l142.4 142.4c7.8 7.8 7.8 20.5 0 28.3-4 3.9-9.1 5.9-14.2 5.9zM941 649.4H83c-11 0-20-9-20-20s9-20 20-20h858c11 0 20 9 20 20s-8.9 20-20 20z" p-id="9050" fill="#ffffff"></path><path d="M794.8 801c-5.1 0-10.2-2-14.1-5.9-7.8-7.8-7.8-20.5 0-28.3L923 624.5c7.8-7.8 20.5-7.8 28.3 0s7.8 20.5 0 28.3L808.9 795.1c-3.9 3.9-9 5.9-14.1 5.9z" p-id="9051" fill="#ffffff"></path></svg>
        <svg t="1742298430731" v-else-if="type === 1" class="icon" @click="type++" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4227" id="mx_n_1742298430732" width="30" height="30"><path d="M914.2 705L796.4 596.8c-8.7-8-22.7-1.8-22.7 10V688c-69.5-1.8-134-39.7-169.3-99.8l-45.1-77 47-80.2c34.9-59.6 98.6-97.4 167.4-99.8v60.1c0 11.8 14 17.9 22.7 10l117.8-108.1c5.8-5.4 5.8-14.6 0-19.9L796.4 165c-8.7-8-22.7-1.8-22.7 10v76H758c-4.7 0-9.3 0.8-13.5 2.3-36.5 4.7-72 16.6-104.1 35-42.6 24.4-78.3 59.8-103.1 102.2L513 432l-24.3-41.5c-24.8-42.4-60.5-77.7-103.1-102.2C343 263.9 294.5 251 245.3 251H105c-22.1 0-40 17.9-40 40s17.9 40 40 40h140.3c71.4 0 138.3 38.3 174.4 99.9l47 80.2-45.1 77c-36.2 61.7-103 99.9-174.4 99.9H105c-22.1 0-40 17.9-40 40s17.9 40 40 40l142 0.1h0.2c49.1 0 97.6-12.9 140.2-37.3 42.7-24.4 78.3-59.8 103.2-102.2l22.4-38.3 22.4 38.3c24.8 42.4 60.5 77.8 103.2 102.2 33.1 18.9 69.6 30.9 107.3 35.4 3.8 1.2 7.8 1.8 11.9 1.8l15.9 0.1v55c0 11.8 14 17.9 22.7 10L914.2 725c5.9-5.5 5.9-14.7 0-20z" p-id="4228" fill="#ffffff"></path></svg>
        <svg t="1742527589528" v-else class="icon" viewBox="0 0 1024 1024" @click="type = 0" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3091" width="30" height="30"><path d="M928 476.8c-19.2 0-32 12.8-32 32v86.4c0 108.8-86.4 198.4-198.4 198.4H201.6l41.6-38.4c6.4-6.4 12.8-16 12.8-25.6 0-19.2-16-35.2-35.2-35.2-9.6 0-22.4 3.2-28.8 9.6l-108.8 99.2c-16 12.8-12.8 35.2 0 48l108.8 96c6.4 6.4 19.2 12.8 28.8 12.8 19.2 0 35.2-12.8 38.4-32 0-12.8-6.4-22.4-16-28.8l-48-44.8h499.2c147.2 0 265.6-118.4 265.6-259.2v-86.4c0-19.2-12.8-32-32-32zM96 556.8c19.2 0 32-12.8 32-32v-89.6c0-112 89.6-201.6 198.4-204.8h496l-41.6 38.4c-6.4 6.4-12.8 16-12.8 25.6 0 19.2 16 35.2 35.2 35.2 9.6 0 22.4-3.2 28.8-9.6l105.6-99.2c16-12.8 12.8-35.2 0-48l-108.8-96c-6.4-6.4-19.2-12.8-28.8-12.8-19.2 0-35.2 12.8-38.4 32 0 12.8 6.4 22.4 16 28.8l48 44.8H329.6C182.4 169.6 64 288 64 438.4v86.4c0 19.2 12.8 32 32 32z" p-id="3092" fill="#ffffff"></path><path d="M544 672V352h-48L416 409.6l16 41.6 60.8-41.6V672z" p-id="3093" fill="#ffffff"></path></svg>
        
        <svg t="1742302578098" class="icon" @click="changeIndex(-1)" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1527" id="mx_n_1742302578098" width="30" height="30"><path d="M641.408 896L256 512l385.408-384 62.592 62.336L381.184 512 704 833.664z" p-id="1528" fill="#ffffff"></path></svg>
        <svg t="1742298482683" v-if=useStore.isSong @click="stopSong" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5179" width="30" height="30"><path d="M512 1024C228.266667 1024 0 795.733333 0 512S228.266667 0 512 0s512 228.266667 512 512-228.266667 512-512 512z m0-42.666667c260.266667 0 469.333333-209.066667 469.333333-469.333333S772.266667 42.666667 512 42.666667 42.666667 251.733333 42.666667 512s209.066667 469.333333 469.333333 469.333333z m-106.666667-682.666666c12.8 0 21.333333 8.533333 21.333334 21.333333v384c0 12.8-8.533333 21.333333-21.333334 21.333333s-21.333333-8.533333-21.333333-21.333333V320c0-12.8 8.533333-21.333333 21.333333-21.333333z m213.333334 0c12.8 0 21.333333 8.533333 21.333333 21.333333v384c0 12.8-8.533333 21.333333-21.333333 21.333333s-21.333333-8.533333-21.333334-21.333333V320c0-12.8 8.533333-21.333333 21.333334-21.333333z" fill="#ffffff" fill-opacity=".9" p-id="5180"></path></svg>
        <svg t="1742298514261" v-else @click="changeSong" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6444" id="mx_n_1742298514261" width="30" height="30"><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z" fill="#ffffff" p-id="6445"></path><path d="M672 441.6l-170.666667-113.066667c-57.6-38.4-106.666667-12.8-106.666666 57.6v256c0 70.4 46.933333 96 106.666666 57.6l170.666667-113.066666c57.6-42.666667 57.6-106.666667 0-145.066667z" fill="#ffffff" p-id="6446"></path></svg>
        <svg t="1742302609638" class="icon" @click="changeIndex(1)" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1700" width="30" height="30"><path d="M382.656 896L320 833.664 642.816 512 320 190.336 382.592 128 768 512z" p-id="1701" fill="#ffffff"></path></svg>
        <svg t="1742302264938" @click="songList" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12472" width="30" height="30"><path d="M419.037 287.953h413.124c17.673 0 32-14.327 32-32s-14.327-32-32-32H419.037c-17.673 0-32 14.327-32 32s14.327 32 32 32zM419.028 543.17h411.608c17.673 0 32-14.327 32-32s-14.327-32-32-32H419.028c-17.673 0-32 14.327-32 32s14.327 32 32 32zM832.161 735.802H419.037c-17.673 0-32 14.327-32 32s14.327 32 32 32h413.124c17.673 0 32-14.327 32-32s-14.327-32-32-32z" fill="#ffffff" p-id="12473"></path><path d="M256.037 255.953m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#ffffff" p-id="12474"></path><path d="M256.037 510.787m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#ffffff" p-id="12475"></path><path d="M256.037 767.621m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#ffffff" p-id="12476"></path></svg>
      </view>
    </view>
  </view>
</view>
</template>

<style scoped lang="scss">

  .player {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-image: url('https://p2.music.126.net/aJWtwvdYRXvKUpAE2C6NoA==/109951168919708423.jpg'); /* 半透明背景 */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transform: scale(1.2);
  }
  .back{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    backdrop-filter: blur(10px); /* 模糊效果 */
    background-color: rgba(0,0,0,.5);
    display: flex;
    flex-direction: column;
  }
  .center {
    flex: 2;

    
  }
  .footer{
    flex: 1;
    display: flex;
    flex-direction: column;
    .mess{
      width: 100%;
      display: flex;
      justify-content: center;
      uni-text{
        margin:100rpx 40rpx 0;
      }
    }
    .plan{
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      uni-slider{
        width: 300rpx;
        margin: 0 40rpx;
      }
    }
    .play{
      width: 100%;
      display: flex;
      justify-content:center;
      margin-top: 30rpx;
      .icon{
        margin: 0 30rpx;
      }
    }
  }
</style>
